<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>专题列表页</title>
<link rel="stylesheet" type="text/css" href="../css/blog.css"/>
<script type="text/javascript" src="../js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="../js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="../js/imagesloaded.pkgd.min.js"></script>
</head>

<body>
<div class="sub-cont">
	<div class="profile"><a href="index.html"><img src="../images/heart.jpg" /></a></div>
    <div class="sub-name">
    	<h2>kite</h2>
        <p>一句话简介一句话简介一句话简介一句话简介</p>
    </div>
    <ul class="sub-nav">
    	<li><a href="">首页</a></li>
        <li><a href="">分类一</a></li>
        <li><a href="">分类二</a></li>
        <li><a href="">分类三</a></li>
        <li><a href="">分类四</a></li>
    </ul>
    <div class="sub-link">
    	<a href="" class="ico github"></a>
    	<a href="" class="ico mail"></a>
    	<a href="" class="ico rss"></a>
    </div>
</div>
<div class="page-cont">
    <div class="special-article">
    	<h1>LOFTER——专注兴趣，分享创作</h1>
        <div class="artile">
        	<p>精致体验：LOFTER追求精致入微的视觉和交互体验，为每一片内容精心度量，让你的视角所触及的每一个像素，都蕴含独具匠心的精致设计。</p>
        	<p>极简易用：LOFTER在功能方面努力做到简单易用，希望让用户的每一次操作都能简单快捷、随性而为，从而满足目标用户碎片化、高效率的记录需求。</p>
        	<p>内容品质：LOFTER推崇纯粹的内容主义，摒弃一切与内容无关的琐碎和繁杂，并希望通过挖掘和推荐，打造一系列优秀的LOFTERS，激活目标用户的阅读兴趣。</p>
        </div>
    </div>
	<div class="special-list">
        <div class="list-cont">
            <div class="item text">
                <div class="main">
                    <h2>LOFTER，从简约中领悟品质的真谛</h2>
                    <img src="../images/article-1.jpg" alt="">
                    <div class="brief">
                        <p>有没有那么一件单品、一张照片、一副美景或一杯暖饮，让你流连忘返、回味无穷？LOFTER的视觉设计，希望悄悄的留住你的视线，带给你唯一却熟悉的感觉…</p>
                    </div>
                    <a href="article.html" class="link"><span class="date">2016-01-15</span></a>
                </div>
            </div>
            <div class="item img">
                <div class="main">
                    <img src="../images/article-1.jpg" alt="">
                    <a href="picture.html" class="link"><span class="date">2016-01-15</span></a>
                </div>
            </div>
            <div class="item text">
                <div class="main">
                    <h2>LOFTER——专注兴趣，分享创作</h2>
                    <img src="../images/article-2.jpg" alt="">
                    <div class="brief">
                        <p><strong>精致体验：</strong>LOFTER追求精致入微的视觉和交互体验，为每一片内容精心度量，让你的视角所触及的每一个像素，都蕴含独具匠心的精致设计。</p>
                        <p><strong>极简易用：</strong>LOFTER在功能方面努力做到简单易用，希望让用户的每一次操作都能简单快捷、随性而为，从而满足目标用户碎片化、高效率的记录需求。</p>
                        <p><strong>内容品质：</strong>LOFTER推崇纯粹的内容主义，摒弃一切与内容无关的琐碎和繁杂，并希望通过挖掘和推荐，打造一系列优秀的LOFTERS，激活目标用户的阅读兴趣。</p>
                    </div>
                    <a href="article.html" class="link"><span class="date">2016-01-15</span></a>
                </div>
            </div>
            <div class="item img">
                <div class="main">
                    <img src="../images/article-2.jpg" alt="">
                    <a href="picture.html" class="link"><span class="date">2016-01-15</span></a>
                </div>
            </div>
            <div class="item text">
                <div class="main">
                    <div class="brief">
                        <p>有这么一些人，喜欢拍点什么，写日志总是想不到标题，拍了一堆相片，不知如何组成一个文章，不知如何或者不想加上一些修饰就发布上来……</p>
                        <p>他们生活随意，常常需要在工作台上贴上一些黄色的小纸条来提醒自己杂乱的工作，这时，真的需要一个LOFTER，也来参与一下热闹的互联网，微博你玩不起来，博客想不到主题，不知道如何发布组图也不想发布，你也不知道如何组织文字和整理思路，但是你有一堆的好作品或者一堆好相片，也想在大伙里路过一下，让大伙转过头来注意一下你……</p>
                        <p>于是LOFTER遇上了你，你遇上了LOFTER</p>
                    </div>
                    <a href="article.html" class="link"><span class="date">2016-01-15</span></a>
                </div>
            </div>
            <div class="item img">
                <div class="main">
                    <img src="../images/article-1.jpg" alt="">
                    <a href="picture.html" class="link"><span class="date">2016-01-15</span></a>
                </div>
            </div>


        </div>
	</div>
</div>
<script type="text/javascript">
	var $grid = $('.list-cont').masonry({
		itemSelector: '.item'
	});
	// layout Masonry after each image loads
	$grid.imagesLoaded().progress( function() {
		$grid.masonry('layout');
	});
</script>
</body>
</html>
